import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Battery")

    property color greenClr: "#18FD18"//绿色,健康
    property color colorBase: greenClr

    property int powerValue: 80
    Rectangle {
            color: "#ffffff"
            width: parent.width
            height: parent.height
            Rectangle {
                id: rect_bat_head
                width: 10
                height: 30
                radius: 1
                color: "gray"
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.horizontalCenterOffset: 50
                 anchors.top: parent.top;
                 anchors.topMargin: 100;
            }

            Rectangle {
                id: rect_bat_body
                anchors.verticalCenter:  rect_bat_head.verticalCenter
                anchors.right: rect_bat_head.left //本项的右边对齐于 rect_bat_head 右边,

                anchors.rightMargin: 2
                width: parent.width /2 -50
                height: 100
                color: "#ffffff"
                radius: 10
                border.width: 1
                border.color: "gray"
                Rectangle {
                    id: rect_bat_value
                    width: (parent.width-8)*(powerValue/100.0)
                    height: parent.height-8
                    anchors.left: parent.left
                    anchors.leftMargin: 4
                    anchors.verticalCenter:parent.verticalCenter
                    radius: 8
                    color: colorBase
                }
                Text {
                    id: text_bat_text
                    anchors.centerIn: parent
                    font.pixelSize: 15
                    font.bold: true
                    color: "black"
                    text: powerValue + "% 健康"
                }
            }
    }
}
